import { Form, Input, Button, Checkbox } from 'antd'
// import { UserOutlined, LockOutlined } from '@ant-design/icons'
import './index.css'
import img from '../../assets/img/logo.png'
// import { Link } from 'react-router-dom'
const Login = () => {
  const onFinish = values => {
    // console.log('Received values of form: ', values)
    console.log('验证成功啦!', values)
  }
  return (
    <>
      <div className="login">
        <div className="box">
          <div>
            <img className="logo" src={img} alt="图片" />
          </div>
          <Form
            name="normal_login"
            className="login-form"
            // 给表单项写默认值
            initialValues={{
              remember: true,
              mobile: '13333333333',
              code: '246810',
            }}
            onFinish={onFinish}
            size="large"
          >
            <Form.Item
              name="mobile"
              rules={[
                {
                  required: true,
                  message: '请输入手机号码',
                },
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: '手机号码格式不对',
                  validateTrigger: 'onBlur',
                },
              ]}
            >
              <Input
                // prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="请输入手机号"
                maxLength={11}
              />
            </Form.Item>
            <Form.Item
              name="code"
              rules={[
                {
                  required: true,
                  message: '请输入验证码',
                },
                {
                  pattern: /^\d{6}$/,
                  message: '请输入正确的验证码',
                },
              ]}
            >
              <Input
                // prefix={<LockOutlined className="site-form-item-icon" />}
                placeholder="请输入验证码"
                maxLength={6}
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>我已阅读并同意</Checkbox>
              </Form.Item>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button" block>
                登 录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </>
  )
}
export default Login
